<template>
  <tag-base
    :hit="true"
    :style="tagStyle"
    :fontStyle="tagFontStyle"
    :type="optionInfo?.type || ''"
    :bgColor="optionInfo?.bgColor || ''"
    :row="row"
    v-bind="config"
    @itemEvent="itemEvent"
  ></tag-base>
</template>
<script setup>
import TagBase from './TagBase.vue';

const props = defineProps({
  row: {
    // form数据,或者table的行数据
    type: Object,
    default: () => ({}),
  },
  style: {
    // 除背景颜色之外的其他样式, 公共样式
    type: Object,
    default: () => ({}),
  },
  fontStyle: {
    // 显示的文本样式，公共样式
    type: Object,
    default: () => {},
  },
  options: {
    // 根据不同状态展示不同颜色集合
    type: Array,
    default: () => [],
  },
  bindConfig: {
    type: Object,
    default: () => {},
  },
});

const emits = defineEmits(['itemEvent']);

let optionInfo = ref({});

const tagStyle = computed(() => {
  return {
    width: '100%',
    textAlign: 'center',
    backgroundColor: optionInfo.value.bgColor || '',
    border: '1px solid ' + optionInfo.value.color,
    ...(optionInfo.value?.style || {}),
    ...props.style,
  };
});

const tagFontStyle = computed(() => {
  return {
    color: optionInfo.value?.color || '',
    ...(optionInfo.value?.fontStyle || {}),
    ...props.fontStyle,
  };
});

const config = computed(() => {
  return {
    ...optionInfo.value.bindConfig,
    ...props.bindConfig,
  };
});

function getCurrentOption() {
  let arr = props.options.filter(item => {
    let flag = item.value === props.row[props.bindConfig?.codeName || 'status'];
    return flag;
  });
  optionInfo.value = arr?.length ? arr[0] : {};
}

function itemEvent(data) {
  emits('itemEvent', data);
}

watch(
  () => props.row,
  val => {
    getCurrentOption();
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>
